<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{block name="title"}标题{/block}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入 layui.css -->
  <link href="/static/lib/layui/css/layui.css" rel="stylesheet">
  <style>
  .select-tree {
    font-family: Consolas, Monaco, 'Courier New', monospace; /* 等宽字体 */
    white-space: pre; /* 保留空格和换行 */
    padding: 5px;
  }
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">物品管理系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">menu 11</a></dd>
          <dd><a href="javascript:;">menu 22</a></dd>
          <dd><a href="javascript:;">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          {$userinfo["username"]}
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;" id="changepass">修改密码</a></dd>
          <dd><a href="/admin/logout">退出登录</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
    {block name="left"}
    <div class="layui-side layui-bg-black">

        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item {$controller_action_name=='/admin/index'? 'layui-this' :''}">
                    <a href="/admin/index" >后台首页</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">权限管理</a>
                    <dl class="layui-nav-child">
                      <dd><a href="javascript:;">角色管理</a></dd>
                      <dd><a href="/admin/index/nodeManager">节点管理</a></dd>
                      <dd><a href="javascript:;">用户管理</a></dd>
                    </dl>
                  </li>
                {foreach $menus as $key=>$vo }
                <li class="layui-nav-item {$controller_action_name==$key? 'layui-this' :''}">
                    <a href="{$key}" >{$vo}</a>
                </li>
                {/foreach}
            </ul>
        </div>
    </div>
    {/block}
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <blockquote class="layui-elem-quote layui-text">
            {block name="menu"}{/block}
        </blockquote>
      <div class="layui-card layui-panel">
        <div class="layui-card-body">
            {block name="main"}{/block}
        </div>
      </div>
      <br><br>
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<div id="changepass-box" style="display: none; padding: 15px;">
    <form class="layui-form" action="" lay-filter="changepass-form">
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="text" name="oldpass" value="" required lay-verify="password" placeholder="请输入原密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="text" name="newpass" value="" required lay-verify="password" placeholder="请输入新密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">重复密码</label>
            <div class="layui-input-block">
                <input type="text" name="renewpass" value="" required lay-verify="password" placeholder="请输入重复密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="changepass-form">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 引入 layui.js -->
<script src="/static/lib/layui/layui.js"></script>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element;
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    menuLeft: function(othis){ // 左侧菜单事件
      layer.msg('展开左侧菜单的操作', {icon: 0});
    },
    menuRight: function(){  // 右侧菜单事件
      layer.open({
        type: 1,
        title: '更多',
        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
        area: ['260px', '100%'],
        offset: 'rt', // 右上角
        anim: 'slideLeft', // 从右侧抽屉滑出
        shadeClose: true,
        scrollbar: false
      });
    }
  });
});
</script>
{block name="javascript"}{/block}
{block name="common-script"}
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </div>
</script>
<script>
    var urls = {
        list: "/" + controllername + "/list",
        del: "/" + controllername + "/del",
        edit: "/" + controllername + "/edit",
        add: "/" + controllername + "/add"

    }

    layui.use(['table', 'jquery', 'form'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var changeIndex = null;
        var line_height = 'line-height: 40px;';

        // 已知数据渲染
        var inst = table.render({
            elem: '#user-data',
            lineStyle: line_height, // 定义表格的多行样式
            cols: [cols],
            url: urls.list,
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [10, 20],
            limit: 10 // 每页默认显示的数量
        });

        $('#add-adminuser').click(function (e) {
            e.preventDefault();
            var filterObj = {}
            $.each(filterArray, function (indexInArray, valueOfElement) { 
                 filterObj[valueOfElement] = ''
            });
            form.val('demo-val-filter',filterObj);
            layer.open({
                type: 1,
                title: '添加' + title,
                area: area,
                shade: 0,
                content: $('#add-box')
            })
        });

        form.on('submit(btn-save)', function (data) {
            var field = data.field;
            var url = urls.add
            if (field.id) {
                console.log('编辑提交');
                url = urls.edit
            } 
            //return false;
            var loadIndex = layer.load(1);
            $.ajax({
                type: "post",
                url: url,
                data: field,
                dataType: "json",
                success: function (response) {
                    console.log('success=', response);
                    if (response.code == 1) {
                        layer.closeAll();
                        table.reload('user-data');
                    }
                    else {
                        layer.alert(response.msg)
                        layer.closeAll('loading')
                    }
                },
                error: function (response) {
                    console.log('errpr=', response);
                }
            });

            return false;
        });

        table.on('tool(user-data)', function (obj) {
            var data = obj.data;
            console.log(obj);
            if (obj.event == 'del') {
                layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                    obj.del(); // 删除对应行（tr）的DOM结构
                    layer.close(index);
                    var loadIndex = layer.load(1);
                    // 向服务端发送删除指令
                    $.ajax({
                        type: "post",
                        url: urls.del,
                        data: {
                            id: data.id,
                        },
                        dataType: "json",
                        success: function (response) {
                            console.log(response);
                            layer.close(loadIndex);
                            table.reload('user-data');
                        }
                    });
                });
            }
            else if (obj.event == 'edit') {
                var filterobj = {}
                $.each(filterArray, function (indexInArray, valueOfElement) { 
                     filterobj[valueOfElement] = data[valueOfElement]
                });
                console.log(filterobj);
                
                form.val('demo-val-filter',filterobj);

                if(data['logo'] !== '' && data['logo'] !== null){
                    $('#image').attr('src', data['logo']); 
                }else{
                    $('#image').attr('src','/static/image/noimg.jpg');
                }
                layer.open({
                    type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
                    shade: 0.6,
                    title: title + '修改',
                    area: area,
                    content: $('#add-box'),
                    success: function (layero) {

                    }
                });
            }

        });
        form.verify({
            // 验证密码，且为必填项
            password: function (value, elem) {
                if (!/^[\S]{5,15}$/.test(value)) {
                    return '密码必须为 5 到 15 位的非空字符';
                }
            },
        });

        $('#changepass').click(function (e) {
            e.preventDefault();
            var oldpass = "11111"
            var newpass = "admin"
            changeIndex = layer.open({
                type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
                shadeClose: true,
                title: '修改密码',
                content: $('#changepass-box'),
                success: function (layero) {

                }
            });

        });

        //<button lay-submit lay-filter="filter">提交</button>
        form.on('submit(changepass-form)', function (data) {
            console.log(data);
            if (data.field.newpass !== data.field.renewpass) {
                layer.alert("两次密码输入不一致！");
                return false
            }
            $.ajax({
                type: "post",
                url: "/api_admin/changePass",
                data: {
                    oldpass: data.field.oldpass,
                    newpass: data.field.newpass
                },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    if (response.code == 1) {
                        layer.msg(response.msg)
                        layer.close(changeIndex)
                    } else {
                        layer.alert(response.msg)
                    }
                }
            });
            return false;
        });
        // 搜索提交
        form.on('submit(formSearch)', function (data) {
            var field = data.field; // 获得表单字段
            console.log(field);
            
            // 执行搜索重载
            table.reload('user-data', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: {
                    where: field // 搜索的字段
                }
            });
            layer.msg('搜索成功');
            return false; // 阻止默认 form 跳转
        });
    });
</script>
{/block}
</body>
</html>